<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <th:block th:include="include :: header('IM服务对话列列表')"/>
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>报表：</label>
                            <select class="form-control" name="" id="datess">
                                <option value="1">月报表</option>
                                <option value="2">季报表</option>
                                <option value="3">周报表</option>
                            </select>
                        </li>
                        <li>

                            <input type="text" class="form-control" name="beginTime" id="beginTime"
                                   placeholder="呼叫开始时间" />
                        </li>
                        <li>

                            <input type="text" class="form-control" name="endTime" id="endTime"
                                   placeholder="呼叫结束时间" />
                        </li>

                        <li>
                            <input type="text" class="form-control" name="serviceId" id="serviceId"
                                   placeholder="会话Id" />
                        </li>

                        <li>
                            <input type="text" class="form-control" name="fromCity" id="fromCity"
                                   placeholder="对方归属地" />
                        </li>
                        <li>
                            <label>客户状态：</label>
                            <select class="form-control" name="" id="customerState">
                                <option value="">全部</option>
                                <option value="1">未知客户</option>
                                <option value="2">已知客户</option>
                            </select>
                        </li>
                        <li>
                            <label>呼叫渠道：</label>
                            <select class="form-control" name="" id="callFrom">
                                <option value="">全部</option>
                                <option value="1">IM</option>
                                <option value="2">微信</option>
                            </select>
                        </li>


                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script type="text/javascript">
    layui.use('laydate', function () {

        function getMonthStart() {
            var now = new Date(); // 获取当前日期时间
            var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
            var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
            return monthStart;
        }

        function getMonthEnd() {
            var now = new Date(); // 获取当前日期时间
            var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月最后一天的日期时间
            var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
            return monthEnd;
        }

        layui.laydate.render({
            elem: '#beginTime',
            theme: 'molv',
            trigger: 'click',
            value: getMonthStart(),
            type: 'datetime'
        })

        layui.laydate.render({
            elem: '#endTime',
            theme: 'molv',
            value: getMonthEnd(),
            trigger: 'click',
            type: 'datetime'
        })
    });
</script>

<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:service:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:service:remove')}]];
    var prefix = ctx + "system/service";
    var selectRelative = function (serviceId){
            console.log(serviceId)
        var url = ctx + 'system/service/chatRecord?id='+ serviceId;
        $.modal.open("聊天记录", url, '770', '580');
    };




    $(function () {
        document.querySelector('#datess').addEventListener('change', function() {
            var selectedValue = this.value;
            let start_time = ''
            let end_time = ''
            console.log('选中的值是: ' + selectedValue);
            if(selectedValue=='1'){
                //设置查询时间为月报表
                let monthRange = getCurrentToPreviousDateTimeRange('month');
                start_time = monthRange.end
                end_time = monthRange.start
                console.log(start_time)
                console.log(end_time)
            }else if(selectedValue=='3'){
                //设置查询时间为周报表
                let monthRange = getCurrentToPreviousDateTimeRange('week');
                start_time = monthRange.end
                end_time = monthRange.start
                console.log(start_time)
                console.log(end_time)
            }else if(selectedValue=='2'){
                //设置查询时间为季报表
                let monthRange = getCurrentToPreviousDateTimeRange('ji');
                start_time = monthRange.end
                end_time = monthRange.start
                console.log(start_time)
                console.log(end_time)
            }
            $("#beginTime").val(start_time)
            $("#endTime").val(end_time)
        });

        // 获取时间
        function getCurrentToPreviousDateTimeRange(interval) {
            // 获取当前时间
            let currentDateTime = new Date();
            // 根据传入的间隔计算之前的时间
            let previousDateTime;
            switch (interval) {
                case 'week':
                    previousDateTime = new Date(currentDateTime - 7 * 24 * 60 * 60 * 1000);
                    break;
                case 'month':
                    previousDateTime = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth() - 1, currentDateTime.getDate());
                    break;
                case 'ji':
                    previousDateTime = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth() - 3, currentDateTime.getDate());
                    break;
                case 'year':
                    previousDateTime = new Date(currentDateTime.getFullYear() - 1, currentDateTime.getMonth(), currentDateTime.getDate());
                    break;
                default:
                    throw new Error('Invalid interval');
            }

            // 格式化日期时间为YYYY-MM-DD HH:mm:ss格式
            function formatDateTime(dateTime) {
                let year = dateTime.getFullYear();
                let month = (1 + dateTime.getMonth()).toString().padStart(2, '0');
                let day = dateTime.getDate().toString().padStart(2, '0');

                const now = new Date();
                let hours = now.getHours();
                if(hours<10){
                    hours='0'+hours
                }
                let minutes = now.getMinutes();
                if(minutes<10){
                    minutes='0'+hours
                }
                let seconds = now.getSeconds();
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }

            // 返回时间区间
            return {
                start: formatDateTime(currentDateTime),
                end: formatDateTime(previousDateTime)
            };
        };

        function queryParams(params) {
            let monthRange = getCurrentToPreviousDateTimeRange('month');
            let start_time = monthRange.end
            let end_time = monthRange.start
            console.log(start_time)
            console.log(end_time)
            var search = $.table.queryParams(params);
            search.startTime = start_time;
            search.endTime = end_time;
            return search;
        }

        var options = {
            url: prefix + "/listIM",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "IM服务对话",
            queryParams: queryParams,
            columns: [{
                checkbox: true
            },
                {
                    field: 'serviceId',
                    title: '会话Id',
                    visible: true
                },
                {
                    field: 'beginTime',
                    title: '沟通发起时间'
                },
                {
                    field: 'endTime',
                    title: '沟通结束时间'
                },
                {
                    field: 'customerid',
                    title: '客户姓名',
                    formatter: function (value, row, index) {
                        if (row.customerid == '-'){
                            return '未知客户'
                        }else{
                            return  '未知客户'
                        }
                    }
                },
                {
                    field: 'cname',
                    title: '对方归属地',
                    formatter: function (value, row, index) {
                        if (row.cname == 'undefined'){
                            return '未知'
                        }else{
                            return  value
                        }
                    }
                },
                {
                    field: 'cmpid',
                    title: '渠道'
                },
                {
                    field: 'diyitem',
                    title: '客户说话次数'
                },
                {
                    field: 'customerid',
                    title: '客户浏览器名称'
                },
                {
                    field: 'agentid',
                    title: '客户IP地址'
                },
                {
                    field: 'cmpid',
                    title: '备注'

                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="selectRelative(\'' + row.serviceId + '\')"><i class="fa fa-edit"></i>IM会话详情</a> ');

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>